<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>排行榜</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: sans-serif;
        }
        body {
            background-color: #f5f5f5;
        }

        
        .title-bar {
            background-color: #d92929;
            color: #fff;
            text-align: center;
            padding: 10px 0;
            font-size: 18px;
        }

        
        .nav {
            display: flex;
            background-color: #d92929;
            padding: 8px 15px;
        }
        .nav-btn {
            flex: 1;
            border: none;
            background-color: transparent;
            color: #fff;
            font-size: 16px;
            padding: 6px 0;
            cursor: pointer;
        }
        .nav-btn.active {
            background-color: #c02727;
            border-radius: 4px;
        }

        
        .article-tag {
            background-color: #fff;
            padding: 10px 15px;
        }
        .article-tag span {
            background-color: #d92929;
            color: #fff;
            padding: 4px 8px;
            border-radius: 3px;
            font-size: 14px;
        }

        
        .article-list {
            list-style: none;
            padding: 0 15px;
        }
        .article-item {
            background-color: #fff;
            border-radius: 8px;
            margin-bottom: 15px;
            padding: 10px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            position: relative; /
        }
        .top-tag {
            background-color: #d92929;
            color: #fff;
            padding: 2px 8px;
            border-radius: 3px;
            font-size: 12px;
            display: inline-block;
            position: absolute; /* 新增：绝对定位 */
            top: 10px; /* 调整与顶部的距离 */
            left: 10px; /* 调整与左侧的距离 */
            z-index: 1; /* 确保在图片上层 */
        }
        
        .article-img {
         width: 100%;  /* 宽度占满父容器 */
         height: 180px;  /* 和原来的占位符高度一致 */
         object-fit: cover;  /* 图片等比例缩放，裁剪多余部分（避免变形） */
         border-radius: 4px;  /* 和原来的占位符保持一致的圆角 */
        }
        .article-item h3 {
            font-size: 16px;
            color: #333;
            margin-bottom: 8px;
        }
        .meta {
            display: flex;
            justify-content: flex-end;
            font-size: 12px;
            color: #999;
        }
        .meta span {
            margin-left: 15px;
        }
        .topic-tag {
            background-color: #f5f5f5;
            color: #d92929;
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 12px;
            margin-right: 8px;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="title-bar">排行榜</div>
    <div class="nav">
        <button class="nav-btn active">好文精选</button>
        <button class="nav-btn">热门资讯</button>
    </div>
    <div class="article-tag">
        <span>文章</span>
    </div>
    <ul class="article-list">
        <li class="article-item">
            <div class="top-tag">TOP1</div>
            <img 
            src= "imgs\1759844024071.png"
            alt="安卓电视通过KODI看IPTV的封面" 
            class="article-img">
            <h3>安卓电视通过 KODI 看 IPTV</h3>
            <div class="meta">
                <span>💬 105</span>
                <span>👍 345</span>
            </div>
        </li>
        <li class="article-item">
            <div class="top-tag">TOP2</div>
            <img 
            src= "imgs\1759844024071.png"
            alt="2222" 
            class="article-img">
            <h3>起跑线26期：5km跑步，你到了哪一级别？学会这几个跑步技巧，助你提升PB</h3>
            <div class="topic-tag"># 跑者</div>
            <div class="meta">
                <span>💬 151</span>
                <span>👍 132</span>
            </div>
        </li>
        <li class="article-item">
            <div class="top-tag">TOP3</div>
            <img 
            src= "imgs\1759844024071.png"
            alt="www" 
            class="article-img">
            <h3></h3>
            <div class="meta">
                
            </div>
        </li>
    </ul>
</body>
</html>
